<template>
  <div>
    <header-tab></header-tab>
    <!-- 综合排序开始 -->
    <div class="toolbar">
      <div class="toolbar-left">
        <img src="~assets/icon/排序.png" alt="" /> 综合排序
      </div>
      <div class="toolbar-right">
        <img src="~assets/icon/筛选.png" alt="" /> 筛选
      </div>
    </div>
    <!-- 综合排序结束 -->

    <!-- 下方图片 -->
    <img
      src="https://images.mafengwo.net/mobile/images/hotel/widgets/new_user_coupon_m_1802/coupon-banner-gif.gif"
      alt=""
    />

    <!-- 具体酒店开始 -->
    <div v-for="(mirage, index) in mirages" :key="index">
      <!-- :to="{ path: '/jiudianDetail', query: { id: id, index: index } }" -->
      <div @click="qugoumai(index)" class="item">
        <div class="item-contain">
          <div class="item-contain-left">
            <img v-lazy="mirage.img" alt="" />
          </div>
          <div class="item-contain-right">
            <p class="h3">
              <span>{{ mirage.title }}</span>
            </p>
            <p>
              <span>{{ mirage.text }}</span>
            </p>
            <p>
              <b>{{ mirage.discuss }}</b
              >蜂评， <b>{{ mirage.youji }}</b
              >游记提及
            </p>
          </div>
          <span class="bbb">￥{{ mirage.money }}起</span>
        </div>
      </div>
    </div>

    <!-- 具体酒店结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      mirages: [],
      id: "",
      index: "",
    };
  },
  methods: {
    // 去结算
    qugoumai(index) {
      if (this.$store.state.uname != "") {
        this.$router.push({
          path: "/jiudianDetail",
          query: { id: this.id, index: index },
        });
      } else {
        this.$toast("请先登录");
        this.$store.commit("setGoto", "jdgm");
        this.$router.push("/login");
      }
    },
  },
  // 获取酒店数据
  mounted() {
    this.id = this.$route.query.id;
    this.$axios.get("/hotel?id=" + this.id).then((res) => {
      this.mirages = res.data.result;
    });
  },
};
</script>

<style scoped>
.toolbar {
  width: 100%;
  padding: 5px 0;
  background: #f7f7f7;
  border-bottom: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
  display: flex;
}
.toolbar-left,
.toolbar-right {
  width: 50%;
  text-align: center;
}
.toolbar img {
  width: 30px;
  height: 30px;
}

.item {
  width: 100%;
  height: 150px;
}
.item .item-contain {
  width: 95%;
  height: 140px;
  margin: 5px auto;
  position: relative;
  border-bottom: 1px solid #e5e5e5;
}
.item .item-contain img {
  width: 100px;
}
.item-contain-left {
  display: inline-block;
  width: 30%;
}
.item-contain-right {
  display: inline-block;
  width: 70%;
}
.h3 {
  font-size: 20px;
}
.bbb {
  font-size: 20px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #f94226;
}
</style>
